<template>
  <div class="view-login">
    <div class="logo">
      <img src="../assets/img/other/keTangLogo.png" alt="ha" @click="jumpToBigPage()">
    </div>
    <div class="login-content">
      <div class="left">
        <img src="../assets/img/other/loginimage.png" alt="ha">
      </div>
      <div class="right">
        <div class="right-content">
          <h2 class="title">账号登录</h2>
          <ul class="tabs-nav">
            <li class="item" @click="loginMethod=true">账号登录
              <i class="line" v-show="loginMethod===true"></i>
            </li>
            <li class="item" @click="loginMethod=false">手机短信登录
              <i class="line" v-show="loginMethod===false"></i>
            </li>
            <li class="item" @click="loginMethod=undefined">微信登录
              <i class="line"
                 v-show="loginMethod===undefined"></i>
            </li>
          </ul>
          <div>
            <form v-show="loginMethod===true">
              <div class="account-login">
                <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"
                         class="demo-ruleForm">
                  <el-form-item prop="username">
                    <el-input v-model="formLabelAlign.name" placeholder="请输入邮箱/手机号/账号"></el-input>
                  </el-form-item>
                  <el-form-item prop="pass">
                    <el-input type="password" v-model="ruleForm.pass" autocomplete="off"
                              placeholder="请输入密码"></el-input>
                  </el-form-item>
                </el-form>
              </div>
            </form>
          </div>
          <div>
            <form v-show="loginMethod == false">
              <el-input v-model="input" placeholder="请输入内容"></el-input>
            </form>
          </div>
          <div>
            <form v-show="loginMethod == undefined">
              <el-input v-model="input" placeholder="请输入内容"></el-input>
              <div>okok</div>
            </form>
          </div>

          <div class="auto">
            <el-checkbox label="下次自动登录" name="type"></el-checkbox>
            <el-button plain class="forget">忘记密码？</el-button>
          </div>
          <div class="big-button">
            <div>
              <el-button type="primary" class="main" @click="login('ruleForm')">登录</el-button>
            </div>
            <div class="register">
              <p>还没有账号？
                <span @click="jumpToReg">去注册</span>
              </p>
            </div>
          </div>
          <div class="qr-box" v-show="loginMethod !== undefined">
            <div class="qr-code" @click="loginMethod=undefined">
            </div>
          </div>
          <div class="qr-box" v-show="loginMethod === undefined">
            <div class="qr-code-pc" @click="loginMethod=true">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>


export default {
  data() {
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass');
        }
        callback();
      }
    };
    return {
      formLabelAlign: {
        name: '',
        region: '',
        type: ''
      },
      ruleForm: {
        pass: '',
        checkPass: '',
        age: ''
      },
      rules: {
        pass: [
          {validator: validatePass, trigger: 'blur'}
        ],
      },
      input: '',
      loginMethod: true,
    }
  },
  components: {},
  methods: {
    jumpToReg() {
      this.$router.push('/register')
    },
    login(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.request.post("/login", {
            username: this.formLabelAlign.name,
            password: this.$md5(this.ruleForm.pass)
          }).then(res => {
            if (res === 'user does not exist') {
              this.$message.error('用户不存在')
            } else if (res === 'password error') {
              this.$message.error('密码错误')
            } else if (res.role === "1") {
              localStorage.setItem('role', "teacher")
              localStorage.setItem('token', res.token)
              localStorage.setItem('username', this.formLabelAlign.name)
              this.$router.push('/main')
            } else if (res.role === "0") {
              localStorage.setItem('role', "student")
              localStorage.setItem('token', res.token)
              localStorage.setItem('username', this.formLabelAlign.name)
              this.$router.push('/main')
            } else if (res === 'The user name type is incorrect') {
              this.$message.error('用户名输入格式不正确')
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      })
    },
    jumpToBigPage(){
      this.$router.push("/bigPage/homePage")
    }
  },
  created() {
    if (localStorage.getItem("token") !== null) {
      this.$router
    }
  }
}
</script>
<style scoped>
.view-login {
  background-size: 100%;
  position: relative;
  width: 100%;
  background: #f8f9fa no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  min-height: calc(100vh);
}

.logo {
  position: absolute;
  top: 70px;
  left: 90px;
  cursor: pointer;
}

.logo img {
  display: block;
  max-width: 180px;
  max-height: 45px;
}

.login-content {
  display: flex;
  justify-content: space-between;
}

.left {
  margin-right: -100px;
}

.left img {
  display: block;
  height: 700px;
}

.right-content {
  width: 560px;
  padding: 0 44px;
  background: #fff;
  border: 1px solid #eee;
  box-shadow: 0 0 61px 0 rgba(85, 108, 144, .07);
}

.title {
  position: relative;
  padding: 27px 0;
  text-align: center;
  font-size: 31px;
  font-weight: 700;
}

.tabs-nav {
  margin-bottom: 30px;
  display: flex;
  justify-content: space-between;
}

.line {
  background-color: rgb(66, 133, 244);
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
}

.item {
  cursor: pointer;
  position: relative;
  padding-bottom: 9px;
  font-size: 24px;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  text-align: left;
  color: #74787c;
  line-height: 32px;
}

.auto {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

form {
  margin-bottom: 50px;
}

::v-deep .el-checkbox__label {
  font-size: 19px;
}

::v-deep .el-checkbox__inner {
  width: 20px;
  height: 20px;
}

::v-deep .el-checkbox__inner::after {
  left: 6px;
  top: 2px;
}

.forget {
  border: white;
  font-size: 18px;
}

.big-button {
  margin-top: 30px;
}

.main {
  width: 100%;
  height: 60px;
}

.register {
  margin-top: 30px;
}

.register p {
  display: flex;
  justify-content: flex-end;
  font-size: 20px;
}

.register span {
  cursor: pointer;
  color: #4285f4;
}

.qr-box {
  overflow: hidden;
  margin: 0 -45px 0;
}

.qr-code {
  position: relative;
  height: 100px;
  width: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: url("../assets/img/other/qrcode1.png") no-repeat 0 0/cover;
  transform: rotateY(180deg);
}

.qr-code-pc {
  position: relative;
  height: 100px;
  width: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: url("../assets/img/other/qrcode.png") no-repeat 0 0/cover;
  transform: rotateY(180deg);
}

.el-button {
  font-size: 20px;
}

::v-deep .el-form {
  transform: translateX(-100px);
}

::v-deep .el-input__inner {
  font-size: 20px;
  height: 60px;
}

::v-deep .el-input {
  width: 127%;
}

::v-deep .el-form-item__error {
  font-size: 17px;
}

::v-deep .el-form-item {
  margin-bottom: 23px;
}

::v-deep .el-input__suffix {
  right: 12px;
  top: 2px;
}

::v-deep .el-message--success {
  bottom: 200px;
}

</style>
